let baseOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    series: [
      {
        name: 'Direct',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [-320, 302, 301, 334, 390, 330, 320]
      },
      {
        name: 'Mail Ad',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [120, -132, 101, 134, 90, 230, 210]
      },
      {
        name: 'Affiliate Ad',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: 'Video Ad',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [150, 212, 201, 154, 190, 330, 410]
      },
      {
        name: 'Search Engine',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [820, 832, 901, 934, 1290, 1330, 1320]
      }
    ]
  };

function buildSeriesItem(name, data) {
  let item =       {
    name: 'Direct',
    type: 'bar',
    stack: 'total',
    label: {
      show: true
    },
    emphasis: {
      focus: 'series'
    },
    data: [-320, 302, 301, 334, 390, 330, 320]
  }

  item.name = name;
  item.data = data;

  return item;
}

function setYAxis(years) {
  baseOption.yAxis.data = Array.from(years);
}

export function builtStackedBar(data, key = 'totalOperatingRevenue') {

  let years = new Set()

  let q1 = new Map()
  let q2 = new Map()
  let q3 = new Map()
  let q4 = new Map()

  data.forEach(element => {
    let year = element.ses.substring(0, 4);
    years.add(year);
    q1.set(year, 0)
    q2.set(year, 0)
    q3.set(year, 0)
    q4.set(year, 0)
  })

  data.forEach(element => {

    let year = element.ses.substring(0, 4);
    let sec = element.ses.substring(4);

    if (sec === 'q1') {
      q1.set(year, element[key]);
    } else if (sec === 'q2') {
      q2.set(year, element[key]);
    } else if (sec === 'q3') {
      q3.set(year, element[key]);
    } else if (sec === 'q4') {
      q4.set(year, element[key]);
    }
  });

  setYAxis(years);

  baseOption.series = [
    buildSeriesItem('Q1', Array.from(q1.values())),
    buildSeriesItem('Q2', Array.from(q2.values())),
    buildSeriesItem('Q3', Array.from(q3.values())),
    buildSeriesItem('Q4', Array.from(q4.values()))
  ]

  return baseOption;
}